{extend name="layout/app" /}

{block name="title"}{$blog.title}{/block}

{block name="main"}
<main role="main" class="d-flex flex-grow-1">
    <div class="d-flex main-wrap justify-content-between min-vh-100">
        <!-- 中间内容列 -->
        <div class="primary-col">
            <!-- 顶部导航条 -->
            <div class="breadcrumb d-flex align-items-center px-3 js-scroll">
                <div class="btn btn-sm btn-icon me-3 js-back" aria-label="返回" role="button" tabindex="0">
                    <i class="iconfont icon-left-arrow fs-5"></i>
                </div>
                <h2 class="flex-fill fs-18px fw-bold cursor-pointer js-top">博客</h2>
            </div>

            <!-- 帖子 -->
            <div class="article">
                <!-- 帖子内容 -->
                <div class="p-3">
                    <h1 class="mb-2 fs-4 fw-bold">{$blog.title}</h1>
                    <div class="typo-text fs-18px" id="blogContent">{$blog.content | raw}</div>
                    {if $blog.images > 0}
                    <div class="feed-gallery mt-2">
                        <img class="img-fluid" src="/upload/{$blog.filename}" alt="" data-zoomable>
                    </div>
                    {/if}
                </div>
                <div class="d-flex align-items-center px-3 pb-2 fs-14px text-muted border-bottom">
                    <span class="d-inline-block me-3">
                        <time datetime="{$blog.created_at | date='Y-m-d H:i:s'}">{:nice_time($blog.created_at)}前 ·
                            {$blog.created_at | date='Y-m-d'}</time>
                    </span>
                    <!-- <span class="d-inline-block me-3">山东</span> -->
                    <!-- 帖子工具栏 -->
                    <div class="dropdown ms-auto">
                        <button class="btn btn-sm btn-icon" type="button" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            <i class="iconfont icon-more fs-5"></i>
                        </button>
                        <div class="dropdown-menu dropdown-menu-end">
                            {if is_admin() || is_author($blog.user_id)}
                            <a href="javascript:;" class="dropdown-item text-danger" id="js-del"
                                data-post-id="{:segment(3)}">
                                <i class="iconfont icon-trash me-2"></i>
                                <span>删除</span>
                            </a>
                            {/if}
                            <a class="dropdown-item" href="#">
                                <i class="iconfont icon-shield me-2"></i>
                                <span>屏蔽</span>
                            </a>
                            <a class="dropdown-item" href="#">
                                <i class="iconfont icon-report me-2"></i>
                                <span>举报 帖子</span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-between py-1 px-3 ms-0 post-actions border-bottom">
                    <!-- 评论数 -->
                    <a role="button" class="post-action-reply cursor-arrow" data-bs-toggle="tooltip"
                        data-bs-trigger="hover" title="评论">
                        <div class="btn btn-sm btn-icon post-action-icon">
                            <i class="iconfont icon-comment fs-18px"></i>
                            <span class="badge fs-13px">{$blog.comments ?: ''}</span>
                        </div>
                    </a>
                    <!-- 转帖 -->
                    <a href="javascript:;" class="post-action-retweet cursor-default" title="转帖">
                        <div class="btn btn-sm btn-icon post-action-icon">
                            <i class="iconfont icon-retweet fs-18px js-no-click"></i>
                            <span class="badge fs-13px">5</span>
                        </div>
                    </a>
                    <!-- 喜欢 -->

                    <!-- 收藏 -->
                    <a href="javascript:;" class="post-action-fav cursor-default" title="收藏">
                        <div class="btn btn-sm btn-icon post-action-icon">
                            <i class="iconfont icon-fav fs-18px js-no-click"></i>
                            <span class="badge fs-13px">5</span>
                        </div>
                    </a>
                    <!-- 分享 -->
                    <a href="javascript:;" class="post-action-fav cursor-default" title="分享">
                        <div class="btn btn-sm btn-icon post-action-icon">
                            <i class="iconfont icon-upload fs-18px js-no-click"></i>
                            <span class="badge fs-13px">5</span>
                        </div>
                    </a>
                </div>
            </div>
        </div>

        <!-- 边栏 -->
        <div class="sidebar-col">
            <div class="position-sticky sidebar-sticky">
                <div class="position-relative mt-2 mb-3">
                    <i class="iconfont icon-search search-iconfont"></i>
                    <input class="form-control rounded-5 search-input" type="text" placeholder="搜索">
                </div>
                <div class="tile">
                    <h2 class="mb-0 py-12px px-3 fs-18px fw-bold">有什么新鲜事？</h2>
                    <div href="###" class="tile-item d-flex">
                        <img src="/static/img/avatar.jpg" width="79" height="79" alt="">
                        <div class="d-flex flex-column">
                            <div class="fs-15 fw-bold">摔跤大赛是真打吗？</div>
                            <div class="fs-13 text-muted">摔角 . 昨天</div>
                        </div>
                    </div>
                    <div class="tile-item d-flex flex-column">
                        <div class="fs-13px text-muted">科幻</div>
                        <div class="fs-15px fw-bold">测试标题，测试标题，test</div>
                        <div class="fs-13px text-muted"><i class="iconfont icon-analytics"></i> 114</div>
                    </div>
                    <a class="d-flex p-3 tile-footer" href="###">更多</a>
                </div>
            </div>
        </div>
    </div>
</main>
{/block}

{block name="js"}
<script src="/static/js/post.js"></script>
<script src="/static/js/medium-zoom.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        mediumZoom('[data-zoomable]', {
            margin: 30,
            background: 'rgba(0,0,0,0.7)',
        });

        // $('#loadingSpinner').show();
        $.ajax({
            url: `/comment/list/{$blog_id}`,
            type: 'GET',
            dataType: 'html',
            beforeSend: function () {
                // 请求开始前显示加载层
                $('#loadingSpinner').show();
            },
            success: function (data) {
                $('#loadingSpinner').hide();
                $('#comment_list').html(data);
            },
            error: function (xhr, status, error) {
                $('#loadingSpinner').hide();
                console.error('Error loading URL:', status, error);
                // toast('评论列表加载失败');
            }
        });

        const jDel = document.getElementById('js-del');

        if (jDel) {
            jDel.addEventListener('click', function () {
                let postId = this.getAttribute('data-post-id');
                fetch(`/post/del/${postId}`, {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        'post_id': postId
                    })
                })
                    .then(response => response.json())
                    .then(res => {
                        if (res.status === 'success') {
                            toast(res.message, 'success');
                            setTimeout(function () {
                                window.location.href = "/";
                            }, 2000);
                        } else {
                            toast(res.message, 'danger');
                        }
                    })
                    .catch(error => console.error('Error:', error));
            });
        }
    });
</script>
{/block}